<template>

  <div>
    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css"/>
    <!-- 阿里云视频播放器脚本 -->
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
    <!-- 定义播放器dom -->
    <div id="player" class="prism-player"></div>
  </div>

</template>

<script>

  import playApi from '@/api/player'

  export default {
    //应用video布局
    layout: 'video',
    data() {
      return {
        "videoId": "",
        // "url": "",
        "auth": ""
      }
    },
    created() {
      if(this.$route.params && this.$route.params.videoId) {
        this.videoId=this.$route.params.videoId;
        // this.getUrl();
        this.getAuth();
      }
    },
    methods: {
      // 获取视频凭证信息
      getAuth() {
        // 视频id
        if(!this.videoId) {
          this.$message.error("视频id不能为空");
          return ;
        }
        // 请求获取视频凭证信息
        playApi.getAuth(this.videoId)
          .then(res => {
            if(res.data.code==200) {
              this.auth=res.data.data.auth;
              this.createPlayer();
            }else {
              this.$message.error(res.data.message);
            }
          });
      },
      getUrl() {
        // 视频id
        if(!this.videoId) {
          this.$message.error("视频id不能为空");
          return ;
        }
        // 请求获取视频凭证信息
        playApi.getUrl(this.videoId)
          .then(res => {
            if(res.data.code==200) {
              this.url=res.data.data.url;
              this.createPlayer();
            }else {
              this.$message.error(res.data.message);
            }
          });
      },
      // 创建播放器
      createPlayer() {
        new Aliplayer({
            "id": "player",
            "encryptType":'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
            "vid" : this.videoId,
            "playauth" : this.auth,
            "width": "100%",
            "height": "500px",
            "autoplay": false,
            "isLive": false,
            "rePlay": false,
            "playsinline": true,
            "preload": true,
            "controlBarVisibility": "hover",
            "useH5Prism": true
        }, function(player) {
            console.log('播放器创建成功');
        });
      }
    }

  }

</script>
